<template>
    <div class="home">
        <div class="card-content">
            <div class="card-content-1">
                <div class="card-box-1">
                    <div
                        v-for="(item, index) in cardData1"
                        :key="index"
                        class="card-item"
                        :style="{
                            backgroundImage: `linear-gradient(to bottom right, ${item.startColor}, ${item.endColor})`,
                        }"
                    >
                        <div class="card-item-title">{{ item.title }}</div>
                        <div class="card-item-main">
                            <div :class="[item.icon, 'card-item-icon']"></div>
                            <div class="card-item-num">{{ item.num }}</div>
                        </div>
                    </div>
                </div>
                <div class="card-box-2">
                    <div class="tip">
                        <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                        <div class="tip-title">快捷入口</div>
                    </div>
                    <el-divider class="divider" />

                    <div class="card-box-2-box">
                        <div v-for="(item, index) in cardData2" :key="index" class="">
                            <div
                                class="card-2-box"
                                :style="{
                                    backgroundImage: `linear-gradient(to bottom right, ${item.startColor}, ${item.endColor})`,
                                }"
                            >
                                <div :class="[item.icon, 'card-2-icon']"></div>
                            </div>
                            <div class="card-2-title">{{ item.title }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-content-2">
                <img src="@/assets/img/avatar.png" class="avatar" />
                <div class="person-information-1">管理员</div>
                <div class="person-information-1">上次登陆时间：2020-01-01</div>
            </div>
        </div>
        <div class="chart-content">
            <div class="tip">
                <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                <div class="tip-title">逝者信息</div>
            </div>
            <el-divider class="divider" />
            <div class="chart-main">
                <div style="width: 50%">
                    <div class="tip">
                        <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                        <div class="tip-title">正在守灵逝者信息</div>
                    </div>
                    <!-- <el-divider class="divider" /> -->

                    <GeneralTable
                        v-loading="isLoading1"
                        v-model:formArr="formArr1"
                        v-model:formDataNew="formDataNew1"
                        v-model:formDataOriginal="formDataOriginal1"
                        v-model:isFoldNum="isFoldNum1"
                        @tableSearch="tableSearch1"
                        v-model:buttonArr="buttonArr1"
                        v-model:tabArr="tabArr1"
                        v-model:tabActiveName="tabActiveName1"
                        @tabChange="tabChange1"
                        v-model:tableObj="tableObj1"
                        v-model:paginationObj="paginationObj1"
                        v-model:dialogObj="dialogObj1"
                    />
                </div>
                <div style="width: 50%">
                    <div class="tip">
                        <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                        <div class="tip-title">正在守灵逝者信息</div>
                    </div>
                    <!-- <el-divider class="divider" /> -->
                    <GeneralTable
                        v-loading="isLoading2"
                        v-model:formArr="formArr2"
                        v-model:formDataNew="formDataNew2"
                        v-model:formDataOriginal="formDataOriginal2"
                        v-model:isFoldNum="isFoldNum2"
                        @tableSearch="tableSearch2"
                        v-model:buttonArr="buttonArr2"
                        v-model:tabArr="tabArr2"
                        v-model:tabActiveName="tabActiveName2"
                        @tabChange="tabChange2"
                        v-model:tableObj="tableObj2"
                        v-model:paginationObj="paginationObj2"
                        v-model:dialogObj="dialogObj2"
                    />
                </div>
            </div>
        </div>
        <div class="chart-content">
            <div class="tip">
                <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                <div class="tip-title">统计分析</div>
            </div>
            <el-divider class="divider" />
            <div class="chart-main">
                <div id="chart1Id" style="height: 520px; width: 100%"></div>
                <div id="chart2Id" style="height: 520px; width: 100%"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    // 引入 ECharts 核心模块
    import * as echarts from 'echarts/core';
    // 引入图表组件（按实际需要）
    import { BarChart, PieChart, LineChart } from 'echarts/charts';
    // 引入基础组件（基本上都需要）
    import {
        TooltipComponent,
        LegendComponent,
        TitleComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
    } from 'echarts/components';
    // 引入功能组件（按实际需要）
    import { LabelLayout, UniversalTransition } from 'echarts/features';
    // 引入渲染器（必须）
    import { CanvasRenderer } from 'echarts/renderers';
    import {
        ref,
        shallowRef,
        reactive,
        markRaw,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        nextTick,
        computed,
    } from 'vue';
    import type { Ref, Raw } from 'vue';
    import { isIDCard, downloadExcelFromBase64 } from '@/utils';
    import {
        difficultyChildGetChildListApi,
        welfareorgsGetWelfareOrgsListCustomizeExportApi,
        newChildCancelChildApi,
    } from '@/apis';
    import { GENERAL_REMOTE_OPTIONS, GENERAL_OPTIONS_1 } from '@/constants';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        Plus,
        UploadFilled,
        Delete,
        Finished,
        CloseBold,
        Edit,
        View,
    } from '@element-plus/icons-vue';
    import GeneralTable from '@/components/generalTable/GeneralTable.vue';

    // 注册 echarts 需要的组件
    echarts.use([
        BarChart,
        PieChart,
        LineChart,
        TooltipComponent,
        LegendComponent,
        TitleComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
    ]);
    const cardData1: Ref<any> = ref([
        {
            title: '今日登记',
            icon: 'i-ant-design:bar-chart-outlined',
            num: '9527',
            startColor: '#ec4786',
            endColor: '#b955a4',
        },
        {
            title: '今日火化',
            icon: 'i-material-symbols:local-fire-department-rounded',
            num: '9527',
            startColor: '#865ec0',
            endColor: '#5144b4',
        },
        {
            title: '今日结算',
            icon: 'i-ant-design:money-collect-outlined',
            num: '9527',
            startColor: '#56cdf3',
            endColor: '#719de3',
        },
        {
            title: '今日守灵',
            icon: 'i-material-symbols:countertops-outline-rounded',
            num: '9527',
            startColor: '#fcbc25',
            endColor: '#f68057',
        },
    ]);
    const cardData2: Ref<any> = ref([
        {
            title: '今日登记',
            icon: 'i-ant-design:bar-chart-outlined',
            num: '9527',
            startColor: '#ec4786',
            endColor: '#b955a4',
        },
        {
            title: '今日火化',
            icon: 'i-material-symbols:local-fire-department-rounded',
            num: '9527',
            startColor: '#865ec0',
            endColor: '#5144b4',
        },
        {
            title: '今日结算',
            icon: 'i-ant-design:money-collect-outlined',
            num: '9527',
            startColor: '#56cdf3',
            endColor: '#719de3',
        },
        {
            title: '今日守灵',
            icon: 'i-material-symbols:countertops-outline-rounded',
            num: '9527',
            startColor: '#fcbc25',
            endColor: '#f68057',
        },
    ]);

    const tableChart1Data1: Ref<any> = ref([
        { name: '1月', value: 100 },
        { name: '2月', value: 400 },
        { name: '3月', value: 600 },
        { name: '4月', value: 2000 },
        { name: '5月', value: 300 },
        { name: '6月', value: 1500 },
        { name: '7月', value: 300 },
        { name: '8月', value: 500 },
        { name: '9月', value: 300 },
        { name: '10月', value: 400 },
        { name: '11月', value: 300 },
        { name: '12月', value: 600 },
    ]);
    const tableChart1Data2: Ref<any> = ref([
        { name: '1月', value: 300 },
        { name: '2月', value: 800 },
        { name: '3月', value: 700 },
        { name: '4月', value: 1000 },
        { name: '5月', value: 500 },
        { name: '6月', value: 100 },
        { name: '7月', value: 300 },
        { name: '8月', value: 600 },
        { name: '9月', value: 200 },
        { name: '10月', value: 900 },
        { name: '11月', value: 600 },
        { name: '12月', value: 400 },
    ]);
    const tableChart2Data1: Ref<any> = ref([
        { name: '0~10岁', value: 100 },
        { name: '11~20岁', value: 400 },
        { name: '21~30岁', value: 600 },
        { name: '31~40岁', value: 2000 },
        { name: '41~50岁', value: 300 },
        { name: '51~60岁', value: 1500 },
        { name: '61~70岁', value: 300 },
        { name: '71~80岁', value: 300 },
        { name: '81~90岁', value: 300 },
        { name: '91~100岁', value: 300 },
        { name: '101~110岁', value: 300 },
        { name: '111~120岁', value: 300 },
    ]);
    const tableChart2Data2: Ref<any> = ref([
        { name: '0~10岁', value: 100 },
        { name: '11~20岁', value: 500 },
        { name: '21~30岁', value: 800 },
        { name: '31~40岁', value: 1000 },
        { name: '41~50岁', value: 600 },
        { name: '51~60岁', value: 500 },
        { name: '61~70岁', value: 400 },
        { name: '71~80岁', value: 100 },
        { name: '81~90岁', value: 500 },
        { name: '91~100岁', value: 600 },
        { name: '101~110岁', value: 700 },
        { name: '111~120岁', value: 300 },
    ]);
    const chart1: Ref<any> = shallowRef();
    const chart2: Ref<any> = shallowRef();
    const resizeFun = () => {
        chart1.value.resize();
        chart2.value.resize();
    };

    const dialogObj1: Ref<any> = ref({
        dialogTitle: false, //dialog标题
        dialogVisible: false, //dialog显示
        dialogComponent: '', //组件
        dialogParams: {}, //组件参数
    });
    const isLoading1: Ref<boolean> = ref(false); //
    const isFoldNum1: Ref<number> = ref(10); //第几个开始折叠，可以不用给值，有默认值
    const formArr1: Ref<any[]> = ref([
        // {
        //     fieldName: 'divisionCodes', //字段
        //     fieldValue: [], //字段默认值
        //     fieldText: '行政区划', //字段文字
        //     fieldType: 'administrativeDivisionsCascader', //类型 input select date cascader administrativeDivisionsCascader(行政区划特殊选项)
        //     fieldDisabled: false, //是否禁用
        //     fieldRules: [
        //         //规则
        //         // {
        //         //     required: true,
        //         //     message: '请选择！',
        //         //     trigger: 'blur'
        //         // }
        //     ],
        // },
        // {
        //     fieldName: 'name', //字段
        //     fieldValue: '', //字段默认值
        //     fieldText: '儿童姓名', //字段文字
        //     fieldType: 'input', //类型 input select date cascader
        //     fieldDisabled: false, //是否禁用
        //     fieldRules: [
        //         //规则
        //         // {
        //         //     required: true,
        //         //     message: '请输入！',
        //         //     trigger: 'blur'
        //         // }
        //     ],
        //     // input输入框
        //     inputType: 'text', //类型 number
        //     inputMaxLength: '', //最大输入长度 数字
        // },
        // {
        //     fieldName: 'idNumber', //字段
        //     fieldValue: '', //字段默认值
        //     fieldText: '儿童身份证', //字段文字
        //     fieldType: 'input', //类型 input select date cascader
        //     fieldDisabled: false, //是否禁用
        //     fieldRules: [
        //         //规则
        //         {
        //             validator: (rule: any, value: any, callback: any) => {
        //                 if (value) {
        //                     if (isIDCard(value)) {
        //                         callback();
        //                     } else {
        //                         callback(new Error('请输入正确的儿童身份证号码'));
        //                     }
        //                 } else {
        //                     callback();
        //                 }
        //             },
        //             trigger: 'blur',
        //         },
        //     ],
        //     // input输入框
        //     inputType: 'text', //类型 number
        //     inputMaxLength: '', //最大输入长度 数字
        // },
        // {
        //     fieldName: 'type', //字段
        //     fieldValue: '', //字段默认值 如果是多选并且需要返回数组那默认值就用[]
        //     fieldText: '困境类别', //字段文字
        //     fieldType: 'select', //类型 input select date cascader
        //     fieldDisabled: false, //是否禁用
        //     fieldRules: [
        //         //规则
        //         // {
        //         //     required: true,
        //         //     message: '请选择！',
        //         //     trigger: 'blur'
        //         // }
        //     ],
        //     // select选项框
        //     selectmultiple: false, //select是否多选
        //     selectMultipleLimit: 0, //multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制
        //     selectCollapseTags: false, //多选时是否将选中值按文字的形式展示
        //     selectcollapseTagsTooltip: false, //当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
        //     // selectOptions: GENERAL_OPTIONS_1, //select选项
        //     selectDictionary: GENERAL_REMOTE_OPTIONS[94], //select字典选项，填这个就不用填selectOptions
        //     // selectDefalutOptionsIndex: 0, //select默认选第几个选项,可以数字，字符串，数组，字符串和数组对应值也会是字符串或者数组，但是这样就没法和列表查询联动
        // },
    ]);
    // formDataNew1不用给值，里面会根据formArr1的值来赋值，只是用作其他查询需要值，这个值在不点查询的情况也会根据输入框的改变而改变，所以除了点击查询以外用formDataOriginal1
    const formDataNew1: Ref<any> = ref({});
    const formDataOriginal1: Ref<any> = ref({});
    // currentTab和tabsArr有需要的情况下，比如打开新路由页面，然后保存需要关闭当前页面并且把tabs切换了
    const currentTab = defineModel<any>('currentTab', {
        required: false,
        default: {},
    });
    const tabsArr = defineModel<any>('tabsArr', {
        required: false,
        default: {},
    });

    // 删除多个表格有tableSelection
    const buttonArr1: Ref<any[]> = ref([
        // {
        //     buttonType: 'primary', //类型
        //     buttonPlain: false, //是否为朴素按钮
        //     buttonRound: false, //是否为圆角按钮
        //     buttonCircle: false, //是否为圆形按钮
        //     buttonIcon: Plus, //图标组件
        //     buttonDisabled: false, //按钮是否为禁用状态
        //     buttonLink: false, //是否为链接按钮
        //     buttonText: false, //是否为文字按钮
        //     buttonBg: false, //是否显示文字按钮背景颜色
        //     buttonLoading: false, //是否为加载中状态
        //     buttonLoadingIcon: '', //自定义加载中状态图标组件
        //     buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
        //     buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
        //     buttonMainText: '新增', //按钮文字
        //     buttonClick: () => {
        //         //按钮事件
        //         // console.log('按钮事件')
        //         dialogObj1.value.dialogVisible = true;
        //         dialogObj1.value.dialogParams = {
        //             type: 'edit',
        //         };
        //         dialogObj1.value.dialogComponent = DistressChildApplicationListEdit;
        //         dialogObj1.value.dialogTitle = '新增';
        //     },
        // },
        // {
        //     buttonType: 'primary', //类型
        //     buttonPlain: false, //是否为朴素按钮
        //     buttonRound: false, //是否为圆角按钮
        //     buttonCircle: false, //是否为圆形按钮
        //     buttonIcon: UploadFilled, //图标组件
        //     buttonDisabled: false, //按钮是否为禁用状态
        //     buttonLink: false, //是否为链接按钮
        //     buttonText: false, //是否为文字按钮
        //     buttonBg: false, //是否显示文字按钮背景颜色
        //     buttonLoading: false, //是否为加载中状态
        //     buttonLoadingIcon: '', //自定义加载中状态图标组件
        //     buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
        //     buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
        //     buttonMainText: '导出Excel', //按钮文字
        //     buttonClick: () => { //按钮事件
        //         // console.log('按钮事件')
        //         welfareorgsGetWelfareOrgsListCustomizeExportApi(formDataOriginal1.value).then((res: any) => {
        //             downloadExcelFromBase64( res.data, route.meta.title)
        //         })
        //     }
        // },
        // {
        //     buttonType: 'primary', //类型
        //     buttonPlain: false, //是否为朴素按钮
        //     buttonRound: false, //是否为圆角按钮
        //     buttonCircle: false, //是否为圆形按钮
        //     buttonIcon: Plus, //图标组件
        //     buttonDisabled: false, //按钮是否为禁用状态
        //     buttonLink: false, //是否为链接按钮
        //     buttonText: false, //是否为文字按钮
        //     buttonBg: false, //是否显示文字按钮背景颜色
        //     buttonLoading: false, //是否为加载中状态
        //     buttonLoadingIcon: '', //自定义加载中状态图标组件
        //     buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
        //     buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
        //     buttonMainText: '查看', //按钮文字
        //     buttonClick: () => { //按钮事件
        //         // console.log('按钮事件')
        //         dialogObj1.value.dialogVisible = true
        //         dialogObj1.value.dialogParams = {
        //             id: 1
        //         }
        //         dialogObj1.value.dialogComponent = DistressChildApplicationListView
        //         dialogObj1.value.dialogTitle = '查看'
        //     }
        // },
        // {
        //     buttonType: 'danger', //类型
        //     buttonPlain: false, //是否为朴素按钮
        //     buttonRound: false, //是否为圆角按钮
        //     buttonCircle: false, //是否为圆形按钮
        //     buttonIcon: Delete, //图标组件
        //     buttonDisabled: false, //按钮是否为禁用状态
        //     buttonLink: false, //是否为链接按钮
        //     buttonText: false, //是否为文字按钮
        //     buttonBg: false, //是否显示文字按钮背景颜色
        //     buttonLoading: false, //是否为加载中状态
        //     buttonLoadingIcon: '', //自定义加载中状态图标组件
        //     buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
        //     buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
        //     buttonMainText: '离院注销', //按钮文字
        //     buttonClick: () => { //按钮事件
        //         dialogObj1.value.dialogVisible = true
        //         dialogObj1.value.dialogComponent = LeftBehindChildrenObjectManagementListCancel
        //         dialogObj1.value.dialogParams = {
        //             id: 1
        //         }
        //         dialogObj1.value.dialogTitle = '离院注销'
        //     }
        // },
    ]);
    const tabArr1: Ref<any[]> = ref([
        // {
        //     tabLabel: '申请', //选项卡标题
        //     tabName: '申请', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
        // {
        //     tabLabel: '退回', //选项卡标题
        //     tabName: '退回', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
        // {
        //     tabLabel: '核查派单', //选项卡标题
        //     tabName: '核查派单', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
        // {
        //     tabLabel: '信息核对', //选项卡标题
        //     tabName: '信息核对', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
    ]);
    const tabActiveName1: Ref<string> = ref('');

    const tableObj1: Ref<any> = ref({
        tableData: [],
        tableColumn: [
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '50', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'selection', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '序号', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '100', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'index', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },

            {
                tableProp: 'tingname', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵厅', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'healthStatus', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '状态', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'type', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '外运', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'name', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '逝者姓名', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'idNumber', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '身份证号', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'gender', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '性别', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },

            {
                tableProp: 'expression', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '亲属姓名', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '250', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'phone', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '联系电话', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'basicLivingMoney', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵进厅时间', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'disabledSubsidyMoney', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵出厅时间', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'applyName', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '告别厅', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            // {
            //     tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
            //     tableLabel: '操作', //显示的标题
            //     // tableWidth: '100', //对应列的宽度
            //     tableMinWidth: '400', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
            //     tableFixed: 'right', //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
            //     tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            //     tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
            //     tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
            //     tableChildren: [
            //         //多级表头需要
            //     ],
            //     tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            //     tableContentType: 'button', //column定制内容类型
            //     tableContentButtons: [
            //         // //column定制按钮
            //         {
            //             tableContentButtonType: 'primary', //按钮类型
            //             tableContentButtonPlain: false, //是否为朴素按钮
            //             tableContentButtonRound: false, //是否为圆角按钮
            //             tableContentButtonCircle: false, //是否为圆形按钮
            //             tableContentButtonIcon: markRaw(View), //图标组件
            //             tableContentButtonDisabled: (val: any) => {
            //                 return false;
            //             }, //按钮是否为禁用状态
            //             tableContentButtonText: false, //是否为文字按钮
            //             tableContentButtonLink: false, //是否为链接按钮
            //             tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //             tableContentButtonLoading: false, //是否为加载中状态
            //             tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //             tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
            //             tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //             tableContentButtonMainText: '查看', //按钮文字
            //             tableContentButtonClick: (val) => {
            //                 dialogObj1.value.dialogVisible = true;
            //                 dialogObj1.value.dialogComponent = DistressChildApplicationListView;
            //                 dialogObj1.value.dialogParams = {
            //                     id: val.row.id,
            //                     // 测试数据
            //                     ...val.row,
            //                 };
            //                 dialogObj1.value.dialogTitle = '查看';
            //             },
            //         },
            //         // {
            //         //     tableContentButtonType: 'primary', //按钮类型
            //         //     tableContentButtonPlain: false, //是否为朴素按钮
            //         //     tableContentButtonRound: false, //是否为圆角按钮
            //         //     tableContentButtonCircle: false, //是否为圆形按钮
            //         //     tableContentButtonIcon: View, //图标组件
            //         //     tableContentButtonDisabled: (val: any) => { return false; }, //按钮是否为禁用状态
            //         //     tableContentButtonText: false, //是否为文字按钮
            //         //     tableContentButtonLink: false, //是否为链接按钮
            //         //     tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //         //     tableContentButtonLoading: false, //是否为加载中状态
            //         //     tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //         //     tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
            //         //     tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //         //     tableContentButtonMainText: '申请表', //按钮文字
            //         //     tableContentButtonClick: (val) => {
            //         //         dialogObj1.value.dialogVisible = true;
            //         //         dialogObj1.value.dialogComponent = GeneralPrint;
            //         //         dialogObj1.value.dialogParams = {
            //         //             id: val.row.id,
            //         //         };
            //         //         dialogObj1.value.dialogTitle = '申请表';
            //         //     },
            //         // },
            //         {
            //             tableContentButtonType: 'primary', //按钮类型
            //             tableContentButtonPlain: false, //是否为朴素按钮
            //             tableContentButtonRound: false, //是否为圆角按钮
            //             tableContentButtonCircle: false, //是否为圆形按钮
            //             tableContentButtonIcon: markRaw(Edit), //图标组件
            //             tableContentButtonDisabled: (val: any) => {
            //                 return false;
            //             }, //按钮是否为禁用状态
            //             tableContentButtonText: false, //是否为文字按钮
            //             tableContentButtonLink: false, //是否为链接按钮
            //             tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //             tableContentButtonLoading: false, //是否为加载中状态
            //             tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //             tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
            //             tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //             tableContentButtonMainText: '变更', //按钮文字
            //             tableContentButtonClick: (val) => {
            //                 dialogObj1.value.dialogVisible = true;
            //                 dialogObj1.value.dialogComponent = DistressChildApplicationListEdit;
            //                 dialogObj1.value.dialogParams = {
            //                     id: val.row.id,
            //                     type: 'change',
            //                 };
            //                 dialogObj1.value.dialogTitle = '变更';
            //             },
            //         },
            //         {
            //             tableContentButtonType: 'danger', //按钮类型
            //             tableContentButtonPlain: false, //是否为朴素按钮
            //             tableContentButtonRound: false, //是否为圆角按钮
            //             tableContentButtonCircle: false, //是否为圆形按钮
            //             tableContentButtonIcon: markRaw(Delete), //图标组件
            //             tableContentButtonDisabled: (val: any) => {
            //                 return false;
            //             }, //按钮是否为禁用状态
            //             tableContentButtonText: false, //是否为文字按钮
            //             tableContentButtonLink: false, //是否为链接按钮
            //             tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //             tableContentButtonLoading: false, //是否为加载中状态
            //             tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //             tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
            //             tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //             tableContentButtonMainText: '注销', //按钮文字
            //             tableContentButtonClick: (val) => {
            //                 console.log(val);
            //                 ElMessageBox.confirm('请问是否确认注销?', '提示', {
            //                     confirmButtonText: '确认',
            //                     cancelButtonText: '取消',
            //                     type: 'warning',
            //                 })
            //                     .then(() => {
            //                         newChildCancelChildApi({
            //                             id: val.row.id,
            //                         }).then((res: any) => {
            //                             ElMessage({
            //                                 type: 'success',
            //                                 message: res.msg,
            //                             });
            //                         });
            //                     })
            //                     .catch(() => {
            //                         ElMessage({
            //                             type: 'info',
            //                             message: '取消注销',
            //                         });
            //                     });
            //             },
            //         },
            //     ],
            //     // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
            //     //     return index * 2
            //     // },
            //     // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
            // },
        ],
        tableBorder: true, //是否带有纵向边框
        tableStripe: true, //是否为斑马纹 table
        tableRowClassName: ({
            //自定义每一行的样式
            row,
            rowIndex,
        }) => {
            // if (rowIndex === 1) {
            //     return 'warning-row'
            // } else if (rowIndex === 3) {
            //     return 'success-row'
            // }
            return '';
        },
        // tableHeight: '500', //已经通过样式设置了flex=1，高度不用再设置  table 的高度。 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
        // tableMaxHeight: '500', //已经通过样式设置了flex=1，高度不用再设置  table 的最大高度。 合法的值为数字或者单位为 px 的高度。
        tableHighlightCurrentRow: false, //是否要高亮当前行
        tableFit: true, //列的宽度是否自撑开
        tableShowHeader: true, //是否显示表头
        tableCurrentChange: (currentRow, oldCurrentRow) => {
            //当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
            // console.log(currentRow)
            // console.log(oldCurrentRow)
        },
        tableRowDblclick: (row, column, event) => {
            //当某一行被双击时会触发该事件
            // console.log(row)
            // console.log(column)
            // console.log(event)
        },
        // tableDefaultSort: '', //默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序，例子{ prop: 'date', order: 'descending' }
        tableFormatter: (row, column) => {
            //它用于格式化指定列的值
            // return row.address
        },
        tableRowKey: '', //行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
        tableDefaultExpandAll: false, //是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
        tableShowSummary: false, //是否在表尾显示合计行
        tableLayout: 'fixed', //设置表格单元、行和列的布局方式
        tableSelection: [], //选择项的值
        tableSelectionChange: (newSelection) => {
            //当选择项发生变化时会触发该事件
            tableObj1.value.tableSelection = newSelection;
            // console.log(tableObj1.value.tableSelection)
        },
    });

    const paginationObj1: Ref<any> = ref({
        paginationTotal: 0, //总条目数
        paginationPageSize: 100, //每页默认的条目个数，不设置时默认为10
        paginationCurrentPage: 1, //当前页数
        // paginationPageCount: 11, //总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性
        paginationPageSizes: [100, 200, 300, 400], //展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
        paginationSlotText: '', //slot文字内容
        paginationisShow: true, //是否显示
        paginationLayout: 'slot, total, sizes, prev, pager, next, jumper', //prev (上一页按钮), next (下一页按钮), pager (分页列表), jumper (跳转), total (总计), sizes (每页条数选择), slot(插槽) 和 -> (every element after this symbol will be pulled to the right).
        paginationPagerCount: 11, //设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
        paginationBackground: true, //为分页按钮添加背景色
        paginationSize: 'default', //更改大小
        paginationDisabled: false, //禁用
        paginationHideOnSinglePage: false, //隐藏分页
        paginationDefaultCurrentPage: 1, //当前页数的默认初始值，不设置时默认为 1

        paginationSizeChange: (val: number) => {
            //处理页码大小
            // console.log(tabActiveName1.value)
            // console.log(paginationObj1.value.paginationCurrentPage)
            // console.log(paginationObj1.value.paginationPageSize)
            // console.log(paginationObj1.value.paginationTotal)
            tableSearch1();
        },
        paginationCurrentChange: (val: number) => {
            //当前页变动时候触发的事件
            // console.log(formDataNew1.value)
            // console.log(tabActiveName1.value)
            // console.log(paginationObj1.value.paginationCurrentPage)
            // console.log(paginationObj1.value.paginationPageSize)
            // console.log(paginationObj1.value.paginationTotal)
            tableSearch1();
        },
    });
    // 根据条件查询列表
    const tabChange1 = (val) => {
        // 根据下面两个值查就行
        // console.log(formDataNew1.value)
        // console.log(tabActiveName1.value)
        // console.log(paginationObj1.value.paginationCurrentPage)
        // console.log(paginationObj1.value.paginationPageSize)
        // console.log(paginationObj1.value.paginationTotal)
        tableSearch1();
    };
    // 根据条件查询列表
    const tableSearch1 = (val?: any) => {
        isLoading1.value = true;
        // 调接口 tabActiveName1如果有也要加上
        difficultyChildGetChildListApi({
            pageNo: paginationObj1.value.paginationCurrentPage,
            pageSize: paginationObj1.value.paginationPageSize,
            notNeedPage: false,
            sortDir: '', //排序方式：ascending,descending
            sortField: '', //排序字段
            ...formDataOriginal1.value,
            status: '办结',
        })
            .then((res: any) => {
                paginationObj1.value.paginationTotal = res.data.totalElements;
                tableObj1.value.tableData = res.data.content;
            })
            .catch((err) => {
                // ElMessage.closeAll()
                // ElMessage({
                //     type: 'error',
                //     message: '系统异常，请稍后重试！',
                // })
            })
            .finally(() => {
                isLoading1.value = false;
            });
    };

    const dialogObj2: Ref<any> = ref({
        dialogTitle: false, //dialog标题
        dialogVisible: false, //dialog显示
        dialogComponent: '', //组件
        dialogParams: {}, //组件参数
    });
    const isLoading2: Ref<boolean> = ref(false); //
    const isFoldNum2: Ref<number> = ref(10); //第几个开始折叠，可以不用给值，有默认值
    const formArr2: Ref<any[]> = ref([
        // {
        //     fieldName: 'divisionCodes', //字段
        //     fieldValue: [], //字段默认值
        //     fieldText: '行政区划', //字段文字
        //     fieldType: 'administrativeDivisionsCascader', //类型 input select date cascader administrativeDivisionsCascader(行政区划特殊选项)
        //     fieldDisabled: false, //是否禁用
        //     fieldRules: [
        //         //规则
        //         // {
        //         //     required: true,
        //         //     message: '请选择！',
        //         //     trigger: 'blur'
        //         // }
        //     ],
        // },
        // {
        //     fieldName: 'name', //字段
        //     fieldValue: '', //字段默认值
        //     fieldText: '儿童姓名', //字段文字
        //     fieldType: 'input', //类型 input select date cascader
        //     fieldDisabled: false, //是否禁用
        //     fieldRules: [
        //         //规则
        //         // {
        //         //     required: true,
        //         //     message: '请输入！',
        //         //     trigger: 'blur'
        //         // }
        //     ],
        //     // input输入框
        //     inputType: 'text', //类型 number
        //     inputMaxLength: '', //最大输入长度 数字
        // },
        // {
        //     fieldName: 'idNumber', //字段
        //     fieldValue: '', //字段默认值
        //     fieldText: '儿童身份证', //字段文字
        //     fieldType: 'input', //类型 input select date cascader
        //     fieldDisabled: false, //是否禁用
        //     fieldRules: [
        //         //规则
        //         {
        //             validator: (rule: any, value: any, callback: any) => {
        //                 if (value) {
        //                     if (isIDCard(value)) {
        //                         callback();
        //                     } else {
        //                         callback(new Error('请输入正确的儿童身份证号码'));
        //                     }
        //                 } else {
        //                     callback();
        //                 }
        //             },
        //             trigger: 'blur',
        //         },
        //     ],
        //     // input输入框
        //     inputType: 'text', //类型 number
        //     inputMaxLength: '', //最大输入长度 数字
        // },
        // {
        //     fieldName: 'type', //字段
        //     fieldValue: '', //字段默认值 如果是多选并且需要返回数组那默认值就用[]
        //     fieldText: '困境类别', //字段文字
        //     fieldType: 'select', //类型 input select date cascader
        //     fieldDisabled: false, //是否禁用
        //     fieldRules: [
        //         //规则
        //         // {
        //         //     required: true,
        //         //     message: '请选择！',
        //         //     trigger: 'blur'
        //         // }
        //     ],
        //     // select选项框
        //     selectmultiple: false, //select是否多选
        //     selectMultipleLimit: 0, //multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制
        //     selectCollapseTags: false, //多选时是否将选中值按文字的形式展示
        //     selectcollapseTagsTooltip: false, //当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
        //     // selectOptions: GENERAL_OPTIONS_1, //select选项
        //     selectDictionary: GENERAL_REMOTE_OPTIONS[94], //select字典选项，填这个就不用填selectOptions
        //     // selectDefalutOptionsIndex: 0, //select默认选第几个选项,可以数字，字符串，数组，字符串和数组对应值也会是字符串或者数组，但是这样就没法和列表查询联动
        // },
    ]);
    // formDataNew2不用给值，里面会根据formArr1的值来赋值，只是用作其他查询需要值，这个值在不点查询的情况也会根据输入框的改变而改变，所以除了点击查询以外用formDataOriginal2
    const formDataNew2: Ref<any> = ref({});
    const formDataOriginal2: Ref<any> = ref({});
    // 删除多个表格有tableSelection
    const buttonArr2: Ref<any[]> = ref([
        // {
        //     buttonType: 'primary', //类型
        //     buttonPlain: false, //是否为朴素按钮
        //     buttonRound: false, //是否为圆角按钮
        //     buttonCircle: false, //是否为圆形按钮
        //     buttonIcon: Plus, //图标组件
        //     buttonDisabled: false, //按钮是否为禁用状态
        //     buttonLink: false, //是否为链接按钮
        //     buttonText: false, //是否为文字按钮
        //     buttonBg: false, //是否显示文字按钮背景颜色
        //     buttonLoading: false, //是否为加载中状态
        //     buttonLoadingIcon: '', //自定义加载中状态图标组件
        //     buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
        //     buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
        //     buttonMainText: '新增', //按钮文字
        //     buttonClick: () => {
        //         //按钮事件
        //         // console.log('按钮事件')
        //         dialogObj2.value.dialogVisible = true;
        //         dialogObj2.value.dialogParams = {
        //             type: 'edit',
        //         };
        //         dialogObj2.value.dialogComponent = DistressChildApplicationListEdit;
        //         dialogObj2.value.dialogTitle = '新增';
        //     },
        // },
        // {
        //     buttonType: 'primary', //类型
        //     buttonPlain: false, //是否为朴素按钮
        //     buttonRound: false, //是否为圆角按钮
        //     buttonCircle: false, //是否为圆形按钮
        //     buttonIcon: UploadFilled, //图标组件
        //     buttonDisabled: false, //按钮是否为禁用状态
        //     buttonLink: false, //是否为链接按钮
        //     buttonText: false, //是否为文字按钮
        //     buttonBg: false, //是否显示文字按钮背景颜色
        //     buttonLoading: false, //是否为加载中状态
        //     buttonLoadingIcon: '', //自定义加载中状态图标组件
        //     buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
        //     buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
        //     buttonMainText: '导出Excel', //按钮文字
        //     buttonClick: () => { //按钮事件
        //         // console.log('按钮事件')
        //         welfareorgsGetWelfareOrgsListCustomizeExportApi(formDataOriginal2.value).then((res: any) => {
        //             downloadExcelFromBase64( res.data, route.meta.title)
        //         })
        //     }
        // },
        // {
        //     buttonType: 'primary', //类型
        //     buttonPlain: false, //是否为朴素按钮
        //     buttonRound: false, //是否为圆角按钮
        //     buttonCircle: false, //是否为圆形按钮
        //     buttonIcon: Plus, //图标组件
        //     buttonDisabled: false, //按钮是否为禁用状态
        //     buttonLink: false, //是否为链接按钮
        //     buttonText: false, //是否为文字按钮
        //     buttonBg: false, //是否显示文字按钮背景颜色
        //     buttonLoading: false, //是否为加载中状态
        //     buttonLoadingIcon: '', //自定义加载中状态图标组件
        //     buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
        //     buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
        //     buttonMainText: '查看', //按钮文字
        //     buttonClick: () => { //按钮事件
        //         // console.log('按钮事件')
        //         dialogObj2.value.dialogVisible = true
        //         dialogObj2.value.dialogParams = {
        //             id: 1
        //         }
        //         dialogObj2.value.dialogComponent = DistressChildApplicationListView
        //         dialogObj2.value.dialogTitle = '查看'
        //     }
        // },
        // {
        //     buttonType: 'danger', //类型
        //     buttonPlain: false, //是否为朴素按钮
        //     buttonRound: false, //是否为圆角按钮
        //     buttonCircle: false, //是否为圆形按钮
        //     buttonIcon: Delete, //图标组件
        //     buttonDisabled: false, //按钮是否为禁用状态
        //     buttonLink: false, //是否为链接按钮
        //     buttonText: false, //是否为文字按钮
        //     buttonBg: false, //是否显示文字按钮背景颜色
        //     buttonLoading: false, //是否为加载中状态
        //     buttonLoadingIcon: '', //自定义加载中状态图标组件
        //     buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
        //     buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
        //     buttonMainText: '离院注销', //按钮文字
        //     buttonClick: () => { //按钮事件
        //         dialogObj2.value.dialogVisible = true
        //         dialogObj2.value.dialogComponent = LeftBehindChildrenObjectManagementListCancel
        //         dialogObj2.value.dialogParams = {
        //             id: 1
        //         }
        //         dialogObj2.value.dialogTitle = '离院注销'
        //     }
        // },
    ]);
    const tabArr2: Ref<any[]> = ref([
        // {
        //     tabLabel: '申请', //选项卡标题
        //     tabName: '申请', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
        // {
        //     tabLabel: '退回', //选项卡标题
        //     tabName: '退回', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
        // {
        //     tabLabel: '核查派单', //选项卡标题
        //     tabName: '核查派单', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
        // {
        //     tabLabel: '信息核对', //选项卡标题
        //     tabName: '信息核对', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
    ]);
    const tabActiveName2: Ref<string> = ref('');

    const tableObj2: Ref<any> = ref({
        tableData: [],
        tableColumn: [
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '50', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'selection', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '序号', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '100', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'index', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },

            {
                tableProp: 'lengcangname', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '冷藏室', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'name', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '逝者姓名', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'idNumber', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '身份证号', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'gender', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '性别', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'healthStatus', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '状态', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'type', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '外运', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'expression', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '亲属姓名', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '250', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'phone', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '联系电话', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'basicLivingMoney', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵进厅时间', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'disabledSubsidyMoney', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵出厅时间', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'applyName', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '告别厅', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [
                    //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            // {
            //     tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
            //     tableLabel: '操作', //显示的标题
            //     // tableWidth: '100', //对应列的宽度
            //     tableMinWidth: '400', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
            //     tableFixed: 'right', //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
            //     tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            //     tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
            //     tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
            //     tableChildren: [
            //         //多级表头需要
            //     ],
            //     tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            //     tableContentType: 'button', //column定制内容类型
            //     tableContentButtons: [
            //         // //column定制按钮
            //         {
            //             tableContentButtonType: 'primary', //按钮类型
            //             tableContentButtonPlain: false, //是否为朴素按钮
            //             tableContentButtonRound: false, //是否为圆角按钮
            //             tableContentButtonCircle: false, //是否为圆形按钮
            //             tableContentButtonIcon: markRaw(View), //图标组件
            //             tableContentButtonDisabled: (val: any) => {
            //                 return false;
            //             }, //按钮是否为禁用状态
            //             tableContentButtonText: false, //是否为文字按钮
            //             tableContentButtonLink: false, //是否为链接按钮
            //             tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //             tableContentButtonLoading: false, //是否为加载中状态
            //             tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //             tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
            //             tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //             tableContentButtonMainText: '查看', //按钮文字
            //             tableContentButtonClick: (val) => {
            //                 dialogObj2.value.dialogVisible = true;
            //                 dialogObj2.value.dialogComponent = DistressChildApplicationListView;
            //                 dialogObj2.value.dialogParams = {
            //                     id: val.row.id,
            //                     // 测试数据
            //                     ...val.row,
            //                 };
            //                 dialogObj2.value.dialogTitle = '查看';
            //             },
            //         },
            //         // {
            //         //     tableContentButtonType: 'primary', //按钮类型
            //         //     tableContentButtonPlain: false, //是否为朴素按钮
            //         //     tableContentButtonRound: false, //是否为圆角按钮
            //         //     tableContentButtonCircle: false, //是否为圆形按钮
            //         //     tableContentButtonIcon: View, //图标组件
            //         //     tableContentButtonDisabled: (val: any) => { return false; }, //按钮是否为禁用状态
            //         //     tableContentButtonText: false, //是否为文字按钮
            //         //     tableContentButtonLink: false, //是否为链接按钮
            //         //     tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //         //     tableContentButtonLoading: false, //是否为加载中状态
            //         //     tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //         //     tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
            //         //     tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //         //     tableContentButtonMainText: '申请表', //按钮文字
            //         //     tableContentButtonClick: (val) => {
            //         //         dialogObj2.value.dialogVisible = true;
            //         //         dialogObj2.value.dialogComponent = GeneralPrint;
            //         //         dialogObj2.value.dialogParams = {
            //         //             id: val.row.id,
            //         //         };
            //         //         dialogObj2.value.dialogTitle = '申请表';
            //         //     },
            //         // },
            //         {
            //             tableContentButtonType: 'primary', //按钮类型
            //             tableContentButtonPlain: false, //是否为朴素按钮
            //             tableContentButtonRound: false, //是否为圆角按钮
            //             tableContentButtonCircle: false, //是否为圆形按钮
            //             tableContentButtonIcon: markRaw(Edit), //图标组件
            //             tableContentButtonDisabled: (val: any) => {
            //                 return false;
            //             }, //按钮是否为禁用状态
            //             tableContentButtonText: false, //是否为文字按钮
            //             tableContentButtonLink: false, //是否为链接按钮
            //             tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //             tableContentButtonLoading: false, //是否为加载中状态
            //             tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //             tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
            //             tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //             tableContentButtonMainText: '变更', //按钮文字
            //             tableContentButtonClick: (val) => {
            //                 dialogObj2.value.dialogVisible = true;
            //                 dialogObj2.value.dialogComponent = DistressChildApplicationListEdit;
            //                 dialogObj2.value.dialogParams = {
            //                     id: val.row.id,
            //                     type: 'change',
            //                 };
            //                 dialogObj2.value.dialogTitle = '变更';
            //             },
            //         },
            //         {
            //             tableContentButtonType: 'danger', //按钮类型
            //             tableContentButtonPlain: false, //是否为朴素按钮
            //             tableContentButtonRound: false, //是否为圆角按钮
            //             tableContentButtonCircle: false, //是否为圆形按钮
            //             tableContentButtonIcon: markRaw(Delete), //图标组件
            //             tableContentButtonDisabled: (val: any) => {
            //                 return false;
            //             }, //按钮是否为禁用状态
            //             tableContentButtonText: false, //是否为文字按钮
            //             tableContentButtonLink: false, //是否为链接按钮
            //             tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //             tableContentButtonLoading: false, //是否为加载中状态
            //             tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //             tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
            //             tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //             tableContentButtonMainText: '注销', //按钮文字
            //             tableContentButtonClick: (val) => {
            //                 console.log(val);
            //                 ElMessageBox.confirm('请问是否确认注销?', '提示', {
            //                     confirmButtonText: '确认',
            //                     cancelButtonText: '取消',
            //                     type: 'warning',
            //                 })
            //                     .then(() => {
            //                         newChildCancelChildApi({
            //                             id: val.row.id,
            //                         }).then((res: any) => {
            //                             ElMessage({
            //                                 type: 'success',
            //                                 message: res.msg,
            //                             });
            //                         });
            //                     })
            //                     .catch(() => {
            //                         ElMessage({
            //                             type: 'info',
            //                             message: '取消注销',
            //                         });
            //                     });
            //             },
            //         },
            //     ],
            //     // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
            //     //     return index * 2
            //     // },
            //     // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
            // },
        ],
        tableBorder: true, //是否带有纵向边框
        tableStripe: true, //是否为斑马纹 table
        tableRowClassName: ({
            //自定义每一行的样式
            row,
            rowIndex,
        }) => {
            // if (rowIndex === 1) {
            //     return 'warning-row'
            // } else if (rowIndex === 3) {
            //     return 'success-row'
            // }
            return '';
        },
        // tableHeight: '500', //已经通过样式设置了flex=1，高度不用再设置  table 的高度。 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
        // tableMaxHeight: '500', //已经通过样式设置了flex=1，高度不用再设置  table 的最大高度。 合法的值为数字或者单位为 px 的高度。
        tableHighlightCurrentRow: false, //是否要高亮当前行
        tableFit: true, //列的宽度是否自撑开
        tableShowHeader: true, //是否显示表头
        tableCurrentChange: (currentRow, oldCurrentRow) => {
            //当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
            // console.log(currentRow)
            // console.log(oldCurrentRow)
        },
        tableRowDblclick: (row, column, event) => {
            //当某一行被双击时会触发该事件
            // console.log(row)
            // console.log(column)
            // console.log(event)
        },
        // tableDefaultSort: '', //默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序，例子{ prop: 'date', order: 'descending' }
        tableFormatter: (row, column) => {
            //它用于格式化指定列的值
            // return row.address
        },
        tableRowKey: '', //行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
        tableDefaultExpandAll: false, //是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
        tableShowSummary: false, //是否在表尾显示合计行
        tableLayout: 'fixed', //设置表格单元、行和列的布局方式
        tableSelection: [], //选择项的值
        tableSelectionChange: (newSelection) => {
            //当选择项发生变化时会触发该事件
            tableObj2.value.tableSelection = newSelection;
            // console.log(tableObj2.value.tableSelection)
        },
    });

    const paginationObj2: Ref<any> = ref({
        paginationTotal: 0, //总条目数
        paginationPageSize: 100, //每页默认的条目个数，不设置时默认为10
        paginationCurrentPage: 1, //当前页数
        // paginationPageCount: 11, //总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性
        paginationPageSizes: [100, 200, 300, 400], //展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
        paginationSlotText: '', //slot文字内容
        paginationisShow: true, //是否显示
        paginationLayout: 'slot, total, sizes, prev, pager, next, jumper', //prev (上一页按钮), next (下一页按钮), pager (分页列表), jumper (跳转), total (总计), sizes (每页条数选择), slot(插槽) 和 -> (every element after this symbol will be pulled to the right).
        paginationPagerCount: 11, //设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
        paginationBackground: true, //为分页按钮添加背景色
        paginationSize: 'default', //更改大小
        paginationDisabled: false, //禁用
        paginationHideOnSinglePage: false, //隐藏分页
        paginationDefaultCurrentPage: 1, //当前页数的默认初始值，不设置时默认为 1

        paginationSizeChange: (val: number) => {
            //处理页码大小
            // console.log(tabActiveName2.value)
            // console.log(paginationObj2.value.paginationCurrentPage)
            // console.log(paginationObj2.value.paginationPageSize)
            // console.log(paginationObj2.value.paginationTotal)
            tableSearch2();
        },
        paginationCurrentChange: (val: number) => {
            //当前页变动时候触发的事件
            // console.log(formDataNew2.value)
            // console.log(tabActiveName2.value)
            // console.log(paginationObj2.value.paginationCurrentPage)
            // console.log(paginationObj2.value.paginationPageSize)
            // console.log(paginationObj2.value.paginationTotal)
            tableSearch2();
        },
    });
    // 根据条件查询列表
    const tabChange2 = (val) => {
        // 根据下面两个值查就行
        // console.log(formDataNew2.value)
        // console.log(tabActiveName2.value)
        // console.log(paginationObj2.value.paginationCurrentPage)
        // console.log(paginationObj2.value.paginationPageSize)
        // console.log(paginationObj2.value.paginationTotal)
        tableSearch2();
    };
    // 根据条件查询列表
    const tableSearch2 = (val?: any) => {
        isLoading2.value = true;
        // 调接口 tabActiveName2如果有也要加上
        difficultyChildGetChildListApi({
            pageNo: paginationObj2.value.paginationCurrentPage,
            pageSize: paginationObj2.value.paginationPageSize,
            notNeedPage: false,
            sortDir: '', //排序方式：ascending,descending
            sortField: '', //排序字段
            ...formDataOriginal2.value,
            status: '办结',
        })
            .then((res: any) => {
                paginationObj2.value.paginationTotal = res.data.totalElements;
                tableObj2.value.tableData = res.data.content;
            })
            .catch((err) => {
                // ElMessage.closeAll()
                // ElMessage({
                //     type: 'error',
                //     message: '系统异常，请稍后重试！',
                // })
            })
            .finally(() => {
                isLoading2.value = false;
            });
    };
    onMounted(() => {
        chart1.value = echarts.init(document.getElementById('chart1Id'));
        chart1.value.setOption({
            title: {
                text: '本年度集中守灵统计',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                    },
                },
            },
            legend: {
                data: ['集中守灵', '非集中守灵'],
            },
            grid: {
                // top: '15%', // 调整顶部边距
                // left: '5%',
                // right: '5%',
                // bottom: '5%',
                // containLabel: true, // 确保刻度标签不会被裁剪
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: tableChart1Data1.value.map((item) => item.name),
                axisLabel: {
                    rotate: 45, // 倾斜45度
                    interval: 0, // 强制显示所有标签
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                },
            },
            series: [
                {
                    color: '#8e9dff',
                    smooth: true, //平滑处理
                    // stack: 'Total', //数据堆叠
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0.25,
                                    color: '#8e9dff',
                                },
                                {
                                    offset: 1,
                                    color: '#fff',
                                },
                            ],
                        },
                    },
                    emphasis: {
                        focus: 'series',
                    },
                    name: '集中守灵',
                    data: tableChart1Data1.value.map((item) => item.value),
                    type: 'line',
                },
                {
                    color: '#26deca',
                    smooth: true, //平滑处理
                    // stack: 'Total', //数据堆叠
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0.25,
                                    color: '#26deca',
                                },
                                {
                                    offset: 1,
                                    color: '#fff',
                                },
                            ],
                        },
                    },
                    emphasis: {
                        focus: 'series',
                    },
                    name: '非集中守灵',
                    data: tableChart1Data2.value.map((item) => item.value),
                    type: 'line',
                },
            ],
        });

        chart2.value = echarts.init(document.getElementById('chart2Id'));
        chart2.value.setOption({
            title: {
                text: '本年度死亡年龄段统计',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                    },
                },
            },
            legend: {
                data: ['男性', '女性'],
            },
            grid: {
                // top: '15%', // 调整顶部边距
                // left: '5%',
                // right: '5%',
                // bottom: '5%',
                // containLabel: true, // 确保刻度标签不会被裁剪
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: tableChart2Data1.value.map((item) => item.name),
                axisLabel: {
                    rotate: 45, // 倾斜45度
                    interval: 0, // 强制显示所有标签
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                },
            },
            series: [
                {
                    // color: '#26deca',
                    barWidth: 10,
                    stack: 'Total', //数据堆叠
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#26deca' },
                            { offset: 0.5, color: '#2fcdbc' },
                            { offset: 1, color: '#21c1b0' },
                        ]),
                    },
                    emphasis: {
                        focus: 'series',
                    },
                    name: '女性',
                    data: tableChart2Data2.value.map((item) => item.value),
                    type: 'bar',
                },
                {
                    // color: '#8e9dff',
                    stack: 'Total', //数据堆叠
                    barWidth: 10,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' },
                        ]),
                    },
                    emphasis: {
                        //高亮的图形样式和标签样式。
                        focus: 'series', //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果；series焦当前高亮的数据所在的系列的所有图形
                    },
                    name: '男性',
                    data: tableChart2Data1.value.map((item) => item.value),
                    type: 'bar',
                },
            ],
        });
        window.addEventListener('resize', resizeFun);
    });
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resizeFun);
    });
</script>

<style lang="scss" scoped>
    .home {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        background-color: rgb(247, 250, 252);
    }
    .avatar {
        width: 80px;
        height: 80px;
    }
    .card-content {
        display: flex;
        .card-content-1 {
            // width: 70%;
            flex: 1;
        }
        .card-content-2 {
            width: 15%;
            margin-left: 20px;
            background: linear-gradient(to bottom, rgb(89, 192, 255) 0%, white 50%, white 100%);
            border-radius: 3%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .person-information-1 {
                padding-top: 20px;
            }
        }
    }
    .card-box-1 {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 3%;
        display: flex;
        justify-content: space-between;
        text-align: left;
        color: #fff;
        background-color: #fff;
        .card-item {
            background-image: linear-gradient(to right bottom, rgb(236, 71, 134), rgb(185, 85, 164));
            box-sizing: border-box;
            border-radius: 3%;
            padding: 10px;
            width: 24%;
            overflow: hidden;
            .card-item-title {
                font-size: 18px;
            }
            .card-item-main {
                box-sizing: border-box;
                padding-top: 50px;
                display: flex;
                justify-content: space-between;
            }
            .card-item-icon {
                font-size: 80px;
            }
            .card-item-num {
                font-size: 30px;
                align-self: flex-end;
            }
        }
    }
    .card-box-2 {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        margin-top: 20px;
        border-radius: 3%;
        background-color: #fff;
    }
    .card-box-2-box {
        display: flex;
        // justify-content: space-between;
        .card-2-box {
            color: #fff;
            box-sizing: border-box;
            border-radius: 50%;
            padding: 10px;
            margin: 0 20px;
            width: 100px;
            overflow: hidden;
            .card-2-icon {
                font-size: 80px;
            }
        }
        .card-2-title {
            font-size: 18px;
            padding-top: 20px;
        }
    }
    .tip {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .tip-icon {
        font-size: 20px;
    }
    .tip-title {
        padding-left: 2px;
        font-size: 16px;
    }
    .chart-content {
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 3%;
        text-align: left;
        background-color: #fff;
        color: #000;

        .chart-main {
            display: flex;
        }
    }
    .divider {
        margin-top: 10px;
    }
</style>
